const defaultContextRenderOptions = {
  /** 颜色 */
  color: "red",
  /** 画布宽度 */
  width: 10,
  /** 画布高度 */
  height: 10,
  /** 透明度 0-1  */
  opacity: 1,
  /** 阴影颜色 */
  shadowColor: "",
  /** 模糊程度 */
  shadowBlur: 0,
};
export abstract class ContextRender {
  protected options = defaultContextRenderOptions;
  private _canvas = document.createElement("canvas");
  private _isDestory = false;
  protected readonly Context: CanvasRenderingContext2D;
  protected point = {
    x: 0,
    y: 0,
  };

  get OffsetX() {
    return this.point.x;
  }
  get OffsetY() {
    return this.point.y;
  }
  get isDestory() {
    return this._isDestory;
  }

  /**
   *
   * @param point 初始化时的位置坐标
   * @param options 画布的一些参数
   */
  constructor(point: { x: number; y: number }, options: Partial<typeof defaultContextRenderOptions> = {}) {
    this.point = point;
    this.options = {
      ...this.options,
      ...options,
    };
    this._canvas.width = this.options.width;
    this._canvas.height = this.options.height;
    this.Context = this._canvas.getContext("2d");
    this.Context.fillStyle = this.options.color; // 填充色
    this.Context.shadowColor = this.options.shadowColor; // 阴影颜色
    this.Context.shadowBlur = this.options.shadowBlur; // 模糊程度
    this.Context.globalAlpha = this.options.opacity; // 透明度
  }

  /** 下一帧 */
  private nextFrame() {
    this.Context.globalCompositeOperation = "source-over";
    // 清空当前画布内容
    this.Context.clearRect(0, 0, this._canvas.width, this._canvas.height);
    this.Context.globalCompositeOperation = "lighter";
    // 更新画布内容
    this.render(this.Context);
    // 返回当前画布内容
    return this._canvas;
  }
  /** 当前画布内容的绘制方法 */
  protected abstract render(context: CanvasRenderingContext2D);

  /** 每一帧调用一次 */
  update(context: CanvasRenderingContext2D) {
    context.drawImage(this.nextFrame(), this.OffsetX, this.OffsetY);
  }

  destory() {
    this._isDestory = true;
  }
}
